import React from 'react';
import { Breadcrumb, Icon, Table, Button, Modal, Col, Input, Carousel, message, Row, Form, Checkbox } from 'antd';
import './PickWeek.less';
import $ from 'jquery';
import Config from '../../common/config';

const config = new Config();
const token = sessionStorage.getItem('token')
const FormItem = Form.Item;
const confirm = Modal.confirm;
import PickWeekProduct from './PickWeekProduct';
    class PickWeek extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                PickWeek:[],//获取数据
                PickWeekIndex:0,//第一级索引
                ProductsIndex:0,//第二级产品索引
                productvisible: false,
                products: [],
                categoriesShowId:0,//分类id
            }
        }
        componentDidMount() {
           this.showProduct();
        }
        showProduct(){
            $.ajax({
                url: `${config.JuseHomepage}/categories/listRecommendProduct`,
                type: "get",
                async: true,
                headers: {'Authorization': 'Bearer ' + token,},
                success: res => {
                    if (res.code === 200) {
                        this.setState({
                            PickWeek:res.data.rows,
                            productvisible:false,
                        });
                       
                    }
                }
            });
        }
        //删除列表
        deleteProduct(PickWeekIndex,ProductsIndex){
            this.setState({
                PickWeekIndex:PickWeekIndex,//第一级索引
                ProductsIndex:ProductsIndex,//第二级产品索引
            });
            $.ajax({
                url: `${config.JuseHomepage}/categories/deleteRecommendProduct`,
                type: "post",
                async: true,
                headers: {'Authorization': 'Bearer ' + token,},
                data:{
                    categoriesShowId:this.state.PickWeek[PickWeekIndex].categoryId,
                    productId:this.state.PickWeek[PickWeekIndex].products[ProductsIndex].productId
                },
                success: res => {
                    if (res.code === 200) {
                        this.showProduct();
                    }
                }
            });

        }
        addProductModal(PickWeekIndex,categoryId){
            this.setState({PickWeekIndex:PickWeekIndex,productvisible:true,categoriesShowId:categoryId})
        }
        //添加产品
        addProduct(){
            this.setState({
               productvisible:!this.state.productvisible
            })

        }
        //取消弹框
        cancelProduct(){
            this.setState({
                productvisible:!this.state.productvisible
            })
        }

        render() {
            return (
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页管理</Breadcrumb.Item>
                                <Breadcrumb.Item>推荐分类管理</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div>
                            {this.state.PickWeek.length!=0?
                                    <div>
                                        <div >
                                            <Row type="flex" justify="center" className='zhangqiangabc'>
                                                <Col span={3} >分类名称</Col>
                                                <Col span={21} >推荐商品</Col>
                                            </Row>
                                        </div>
                                        {
                                            this.state.PickWeek.map((itemindex,PickWeekIndex)=>{
                                                return(
                                                    <div key={PickWeekIndex}>
                                                        <Row   className='zhangqianggdh' style={{}} type="flex" justify="center">
                                                            <Col span={3} className={`pickweek-products-list`}>
                                                                {itemindex.categoryName}
                                                            </Col>
                                                            <Col span={21} >
                                                                {itemindex.products.map((item, ProductsIndex) => {
                                                                        return (<Col key={ProductsIndex} span={4} className={`pickweek-products-list pickweek-products-gotu`}>
                                                                            <img src={item.imageUrl + item.listImage} className="floor-pimg" />
                                                                            <p className="floor-name-p floor-name-gahgh">{item.productName}</p>
                                                                            <div className="floor-pmove floor-pmove-fshi">
                                                                                <a onClick={this.deleteProduct.bind(this,PickWeekIndex,ProductsIndex)}><Icon type="delete" />  删除</a>
                                                                            </div>
                                                                        </Col>)})
                                                                }
                                                                {<Col span={4} type="flex" className={`pickweek-products-list pickweek-products-gotu`}>
                                                                        <Button className='floor-addbtn' width={160} style={{ marginLeft:0}} icon="plus"
                                                                                onClick={this.addProductModal.bind(this,PickWeekIndex,itemindex.categoryId)}>
                                                                        </Button>
                                                                    </Col>}
                                                            </Col>
                                                        </Row>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div> : null
                            }
                        </div>
                        {
                            this.state.productvisible?
                                <PickWeekProduct
                                    visible={this.state.productvisible}
                                    products={this.state.products}
                                    addProduct={this.addProduct.bind(this)}
                                    cancelProduct={this.cancelProduct.bind(this)}
                                    categoriesShowId={this.state.categoriesShowId}
                                    updateHtml={this.showProduct.bind(this)}
                                />
                                :
                                null
                        }

                    </div>
                </div>
            )
        }
    }

export default PickWeek;